<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			*{
					margin: 0;
					padding: 0;
				}
			div{
				width: 100px;
				height: 50px;
				background-color: red;
				/* transition: width,background-color 2s,2s linear 0s;
				 */
				transition:  all 5s;
			 
				
			}
			/* :hover 伪类选择器除了可以用在a标签上 还可以用在其他任何标签上 */
			div:hover{
				width: 300px;
				background-color: skyblue;
			 
			}
		</style>
	</head>
	<body>
		
		<!-- 
		 transition: width 2s linear 0s;
		 过渡连写格式
		 过渡属性 过渡时长 运动速度  延迟时间
		 
		 
		 如果想要给多个属性添加效果 也可以使用逗号分割
		 
		 transition: width,background-color 2s,2s linear 0s;
		 
		 	transition: width 2s linear 0s,
			,background-color 2s linear 0s ;
		 -->
		<div></div>
		
	</body>
</html>